<template>
  <div id="data-screen-container" class="data-screen-container vab-data-fullscreen">
    <div class="hidden-sm-and-up" style="padding: 20px">
      <vab-alert title="手机端不支持数据大屏演示" type="warning" />
    </div>
    <div class="hidden-xs-only">
      <zk-data-report-header
        :style="{
          height: headerContentHeight,
          'line-height': headerContentHeight,
        }"
      />
      <div style="padding: 30px 40px 0 40px">
        <!-- <el-row :gutter="20">
          <el-col :span="24">
            <div :style="{ height: '46px' }">
              <div style="padding: 1px 1px">
                <el-select
                  style="width: 168px; padding: 0 10px"
                  v-model.trim="queryForm.grade"
                  clearable
                  filterable
                  :placeholder="'请选择年级'"
                >
                  <el-option v-for="(item, index) in grades" :key="index" :label="item.name" :value="item.name" />
                </el-select>
                <el-select
                  style="width: 168px; padding: 0 10px"
                  v-model.trim="queryForm.class"
                  clearable
                  filterable
                  :placeholder="'请选择班级'"
                >
                  <el-option v-for="(item, index) in 50" :key="index" :label="item.name" :value="index + 1 + '班'" />
                </el-select>

                <el-select
                  style="width: 168px; padding: 0 10px"
                  v-model.trim="queryForm.sex"
                  clearable
                  filterable
                  :placeholder="'请选择性别'"
                >
                  <el-option :key="1" :label="'男'" :value="1" />
                  <el-option :key="2" :label="'女'" :value="2" />
                </el-select>

                <el-button :disabled="isLoading" :icon="Search" native-type="submit" type="primary" @click="selectData">查询</el-button>
              </div>
            </div>
          </el-col>
        </el-row> -->
        <el-row :gutter="20">
          <!-- 总分 -->
          <el-col v-if="reports.project_score" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_score.name }}</div>
              <zk-data-report-detail :score="reports.project_score.score" />
            </div>
          </el-col>
          <!-- 平时分	 -->
          <el-col v-if="reports.project_times" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_times.name }}</div>
              <zk-data-report-detail :score="reports.project_times.score" />
            </div>
          </el-col>
          <!-- 测试分	 -->
          <el-col v-if="reports.project_test" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_test.name }}</div>
              <zk-data-report-detail :score="reports.project_test.score" />
            </div>
          </el-col>
          <!-- 耐力 -->
          <el-col v-if="reports.project_1" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_1.name }}</div>
              <zk-data-report-detail :score="reports.project_1.score" />
            </div>
          </el-col>

          <!-- 爆发力 -->
          <el-col v-if="reports.project_2" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_2.name }}</div>
              <zk-data-report-detail :score="reports.project_2.score" />
            </div>
          </el-col>

          <!-- 其他	 -->
          <el-col v-if="reports.project_3" :span="8">
            <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
              <div class="card-title">{{ reports.project_3.name }}</div>
              <zk-data-report-detail :score="reports.project_3.score" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <vab-theme-setting />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DataScreen',
})

const headerContentHeight = ref<any>('60px')
const topCardHeight = ref<any>('calc((100vh - 320px)')
const bottomCardHeight = ref<any>('174px')

const leftCardHeight1 = ref<any>('calc((100vh - 165px) / 3.5)')
const leftCardHeight2 = ref<any>('calc((100vh - 165px) / 2)')
const leftCardHeight3 = ref<any>('calc((100vh - 165px) / 2.63)')

const rightCardHeight1 = ref<any>('calc((100vh - 165px) / 3)')
const rightCardHeight2 = ref<any>('calc((100vh - 165px) / 2.63)')
const rightCardHeight3 = ref<any>('calc((100vh - 165px) / 3.5)')
const $baseMessage = inject<any>('$baseMessage')

import { is_client } from '/@/api/scanCard'
import { api_getReport } from '/@/api/zkDataScreen'

const isclient = ref<boolean>(false) //当前是否是客户端

const queryForm = ref({
  school_id: '',
  sex: '',
  exam_id: 0,
})

//报表
const reports = ref([])
//学校
const schools = ref([])

const route = useRoute()
const exam_id = ref<any>(0)
//查看数据
const selectData = async () => {
  //根据年级id，班级id，搜索对应的students
  console.log('根据年级id，班级id，搜索对应的students')
  console.log(queryForm.value.school)

  const res = await api_getReport(queryForm.value)
  reports.value = res.data
  // grades.value = res.data
}

onMounted(async () => {
  // examid.value = route.query.exam_id
  const examid = route.query.exam_id
  exam_id.value = examid
  const data = {
    exam_id: exam_id.value,
  }
  //根据exam_id获取有多少个学校
  // let res = await api_getSchools(data)
  // schools.value = res.data

  isclient.value = is_client()

  const res = await api_getReport(data)
  console.log(res.data)
  reports.value = res.data
})
</script>

<style lang="scss" scoped>
#data-screen-container.data-screen-container.vab-data-fullscreen {
  overflow: auto;
  color: #fff;
  background: #01022e !important;

  :deep() {
    .vab-theme-setting {
      background: #01022e;
      border: 1px solid #101f58;

      section {
        > div {
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            display: none;
          }
        }
      }
    }
  }

  .data-screen-card {
    position: relative;
    width: 100%;
    // min-height: 160px;
    padding: 20px;
    margin-bottom: 20px;
    border: 3px solid #01ffff;
    border-radius: 5px;

    .card-title {
      height: 20px;
      padding-left: 10px;
      line-height: 20px;
      text-align: left;
      border-left: 3px solid #01ffff;
    }

    &::before {
      position: absolute;
      top: -3px;
      bottom: -3px;
      left: 30px;
      z-index: 0;
      width: calc(100% - 60px);
      pointer-events: none;
      content: '';
      border-top: 3px solid #101f58;
      border-bottom: 3px solid #101f58;
    }

    &::after {
      position: absolute;
      top: 30px;
      right: -3px;
      left: -3px;
      z-index: 0;
      height: calc(100% - 60px);
      pointer-events: none;
      content: '';
      border-right: 3px solid #101f58;
      border-left: 3px solid #101f58;
    }
  }
}
</style>
